<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <FormItem label="属性名" prop="name">
      <Input v-model="formValidate.name" placeholder="属性名"></Input>
    </FormItem>
    <FormItem label="端口" prop="port">
      <Input v-model="formValidate.port" placeholder="端口"></Input>
    </FormItem>
    <FormItem label="单位" prop="unitName">
      <Input v-model="formValidate.unitName" placeholder="单位"></Input>
    </FormItem>
    <FormItem label="备注" prop="remark">
      <Input v-model="formValidate.remark" placeholder="备注"></Input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
      <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
    </FormItem>
  </Form>
</template>
<script>
export default {
  data: function () {
    const validatePort = (rule, value, callback) => {
      if (!Number.isInteger(+value)) {
        callback(new Error('请输入数字值'))
      } else {
        callback()
      }
    }
    return {
      editOneData: {},
      formValidate: {
        name: '',
        port: '',
        unitName: '',
        remark: ''
      },
      ruleValidate: {
        name: [{ required: true, message: '必填项！', trigger: 'blur' }],
        port: [{ validator: validatePort, trigger: 'change' }],
        unitName: [{ required: true, message: '必填项！', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleSubmit: function (name) {
      let self = this
      self.$refs[name].validate((valid) => {
        if (valid) {
          // this.$Message.success('Success!')
          if (self.editOneData) {
            self.upd()
          } else {
            self.save()
          }
        } else {
          self.$Message.error('Fail!')
        }
      })
    },
    handleReset: function (name) {
      this.$refs[name].resetFields()
    },
    // 重置form
    formReset: function () {
      this.$refs['formValidate'].resetFields()
    },
    // 更新formdata
    updateFormdata: function (data) {
      let self = this
      self.editOneData = JSON.parse(JSON.stringify(data))
      if (self.editOneData.id) {
        self.formReset()
        self.formValidate = self.editOneData
      } else {
        self.formReset()
      }
    },
    // 新增
    save: function () {
      let self = this
      let postData = self.editOneData
      window.myapi.devPro_save(postData).then(function (res) {
        if (res.data.status === 200) {
          self.$Message.success('保存成功!')
          self.$emit('deviceInfoModalSuccess')
        } else {
          let msg = res.data.msg ? res.data.msg : '保存失败！'
          self.$Message.error(msg)
        }
      }).catch(function (e) {
        self.$Message.error('保存失败!')
      })
    },
    // 修改
    upd: function () {
      let self = this
      let postData = self.editOneData
      window.myapi.devPro_upd(postData).then(function (res) {
        if (res.data.status === 200) {
          self.$Message.success('保存成功!')
          self.$emit('deviceInfoModalSuccess')
        } else {
          let msg = res.data.msg ? res.data.msg : '保存失败！'
          self.$Message.error(msg)
        }
      }).catch(function (e) {
        self.$Message.error('保存失败!')
      })
    }
  }
}

</script>
